<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性 选择器</title>
    <style>
        /*具有特定属性的HTML元素样式不仅仅是class和id。
        注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
        */

        /*属性选择器: 包含标题（title）的所有元素变为蓝色：*/
        [title] {
            color:blue;
        }
       /* 属性和值选择器  标题title='runoob'元素的边框样式*/
        [title=runoob]{
            border:5px solid green;
        }
        /*属性和值的选择器 - 多值  包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:*/
        [title~=hello] { color:red; }
        [lang|=en]{ color:blue;}


        input[type="text"] {
            width:150px;
            display:block;
            margin-bottom:10px;
            background-color:yellow;
        }
        input[type="button"] {
            width:120px;
            margin-left:35px;
            display:block;
        }
    </style>
</head>
<body>
    <div title="a">title</div>
    <div title="runoob">title</div>

    <h2>[title~=hello]属性和值的选择器 将适用:</h2>
    <h1 title="hello world">Hello world</h1>
    <p title="student hello">Hello CSS students!</p>
    <hr>
    <h2>[title~=hello]属性和值的选择器 将不适用:</h2>
    <p title="student">Hi CSS students!</p>

    <h2>[lang|=en]将适用:</h2>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <p lang="en-gb">Ello!</p>
    <hr>
    <h2>[lang|=en]将不适用</h2>
    <p lang="us">Hi!</p>
    <p lang="no">Hei!</p>

    <form name="input" action="demo-form.php" method="get">
        Firstname:<input type="text" name="fname" value="Peter" size="20">
        Lastname:<input type="text" name="lname" value="Griffin" size="20">
        <input type="button" value="Example Button">
    </form>
</body>
</html>